<template>
  <div class="home">
    <top-bar @selectedTab="selectedTab($event)"></top-bar>
    <!-- 有音频的视屏光写autoplay不会自动播放 还需要加上muted和 loop属性-->
    <video
      height="800px"
      autoplay
      muted="muted"
      loop
      class="bg-vedio"
    >
      <source src="../assets/images/qm1.mp4" type="video/mp4" />
      您的浏览器不支持 video 标签。
    </video>
    <router-view :cardObj="cardObj"></router-view>
    <foot-bar></foot-bar>
  </div>
</template>

<script>
import { cardHeader } from "../utils/data";
import FootBar from "../components/FootBar.vue";
import TopBar from "../components/TopBar.vue";
import { reactive, provide } from "vue";
export default {
  name: "IndexView",
  components: { TopBar, FootBar },
  setup() {
    let cardObj = reactive({
      title: cardHeader[0].title,
      slogan: cardHeader[0].slogan,
      type: cardHeader[0].type,
      children: [],
    });
    cardObj.children = [];
    cardHeader[0].children.forEach((ele) => {
      cardObj.children.push(ele);
    });
    function selectedTab(item) {
      console.log("item", item);
      cardObj.title = cardHeader[Number(item)].title;
      cardObj.slogan = cardHeader[Number(item)].slogan;
      cardObj.type = cardHeader[Number(item)].type;
      cardObj.children = [];
      cardHeader[Number(item)].children.forEach((ele) => {
        cardObj.children.push(ele);
      });
    }
    provide("cardObj", cardObj);
    return {
      cardObj,
      selectedTab,
    };
  },
};
</script>
<style lang="less" scoped>
.home {
  margin-bottom: 240px;
  padding-top: 52px;
  .bg-vedio {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: auto;
  }
}
</style>
